import { engine } from '@/api';
import { Button, Checkbox, Form, Input, InputNumber, message } from 'antd';
import React, { useEffect } from 'react';
import styles from '../index.less';

interface Props {
  destoryModal: () => void;
  callback: () => void;
  userId: string;
}
export default function EngineForm(props: Props) {
  const { destoryModal, callback, userId } = props;
  const [form] = Form.useForm();
  const [enableGpu, setEnableGpu] = React.useState<boolean>(false);

  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 17 },
  };

  useEffect(() => {
    form.setFieldValue('enableGpu', enableGpu);
  }, [enableGpu]);

  const toggleCheckbox = () => {
    setEnableGpu((pre) => !pre);
  };

  const handleFinish = () => {
    form.validateFields().then((values) => {
      const { cpus, memory, enableGpu } = values;
      delete values.enableGpu;
      delete values.cpus;
      delete values.memory;

      const data = {
        ...values,
        spec: {
          cpus,
          memory,
          enableGpu: enableGpu ? 1 : 0,
        },
        userId,
      };
      engine
        .applyEngine(data)
        .then((res: any) => {
          if (res.code === 200) {
            message.success('申请成功');
          }
        })
        .catch((err) => {
          message.success(err.errmsg || '申请失败');
        })
        .finally(() => {
          callback?.();
          destoryModal?.();
        });
    });
  };

  return (
    <Form
      {...formItemLayout}
      form={form}
      onFinish={handleFinish}
      labelAlign="right"
    >
      <Form.Item
        label="引擎名称"
        name="engineName"
        validateTrigger="onBlur"
        colon
        rules={[{ required: true, message: '请输入引擎名称' }]}
      >
        <Input placeholder="请输入引擎名称" />
      </Form.Item>
      <Form.Item
        label="CPU(核)"
        name="cpus"
        validateTrigger="onBlur"
        colon
        rules={[{ required: true, message: '请输入CPU核心数' }]}
      >
        <InputNumber style={{ width: '100%' }} placeholder="请输入CPU核心数" />
      </Form.Item>
      <Form.Item
        label="内存(GB)"
        name="memory"
        validateTrigger="onBlur"
        colon
        rules={[{ required: true, message: '请输入内存大小' }]}
      >
        <InputNumber style={{ width: '100%' }} placeholder="请输入内存大小" />
      </Form.Item>
      <Form.Item label="启用GPU" name="enableGpu" colon>
        <Checkbox checked={enableGpu} onChange={toggleCheckbox} />
      </Form.Item>
      <Form.Item
        label="引擎镜像"
        name="engineImage"
        colon
        rules={[{ required: true, message: '请输入引擎镜像' }]}
      >
        <Input placeholder="请输入引擎镜像" />
      </Form.Item>
      <div className={styles.formFooter}>
        <Button
          autoInsertSpace
          style={{ backgroundColor: '#F9FBFC' }}
          onClick={() => destoryModal?.()}
        >
          取消
        </Button>
        <Button type="primary" htmlType="submit" autoInsertSpace>
          确定
        </Button>
      </div>
    </Form>
  );
}
